<template>
  <div class="login">
    <el-dialog
      title="用户注册"
      :visible.sync="registerDialogVisible"
      width="450px"
      append-to-body
      >
      <el-form>
        <el-form-item>
          <el-input
            type="text"
            v-model="registerForm.username"
            placeholder="账号"></el-input>
        </el-form-item>

        <el-form-item>
          <el-input
            type="password"
            v-model="registerForm.password"
            placeholder="密码"></el-input>
        </el-form-item>

        <el-form-item>
          <el-input
            type="password"
            v-model="confirmPassword"
            placeholder="确认密码"></el-input>
        </el-form-item>

        <el-form-item>
          <el-select
            v-model="registerForm.admin"
            placeholder="权限组">
            <el-option
              label="普通用户"
              value="0"></el-option>
            <el-option
              label="管理员"
              value="1"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <el-button type="success" @click="register">
        注册
      </el-button>
    </el-dialog>

    <el-form class="login-container" label-position="left" label-width="0px">
      <h1 class="login_title">用户登录</h1>
      <el-form-item>
        <el-input
          style="opacity: 0.8"
          type="text"
          v-model="loginForm.username"
          auto-complete="off"
          placeholder="账号"></el-input>
      </el-form-item>

      <el-form-item>
        <el-input
          style="opacity: 0.8"
          type="password"
          v-model="loginForm.password"
          auto-complete="off"
          placeholder="密码"></el-input>
      </el-form-item>

      <el-form-item style="width: 100%">
        <el-button
          type="primary"
          style="width: 47%;background-color: #9c7fbd;border: none;opacity: 0.8"
          @click="login">
          登录
        </el-button>
        <el-button
          type="success"
          style="width: 47%;background-color: #9c7fbd;border: none;opacity: 0.8"
          @click="showRegisterDialog">
          注册
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "Login",
  data() {
    return {
      loginForm: {
        username: '',
        password: ''
      },
      registerForm: {
        username: '',
        password: '',
        admin: '',
      },
      confirmPassword: '',
      registerDialogVisible: false
    }
  },
  methods: {
    login() {
      this.$axios.post(this.$store.state.URL + '/login',{
        username: this.loginForm.username,
        password: this.loginForm.password
        })
      .then(response => (
          this.ale(response.data)
        )
      );
    },
    showRegisterDialog() {
      this.registerDialogVisible = true
    },
    register() {
      if (this.registerForm.password == this.confirmPassword) {
        this.$axios.post(this.$store.state.URL + '/User/addUser',{
          username: this.registerForm.username,
          password: this.registerForm.password,
          admin: this.registerForm.admin
        }).then(response => (
          this.regAle()
        ))
      } else {
        alert("两次密码不匹配")
      }
    },
    ale(data) {
      if (data.result == 2) {
        alert("登录成功")
        this.$router.push("/DMHead")
        this.$store.dispatch("changePrivilegeAction", data.admin)
        this.$store.dispatch("changeUsernameAction", data.username)
      }
      if (data.result == 1) alert("密码错误")
      if (data.result == 0) alert("不存在此用户")
    },
    regAle() {
      alert('注册成功')
      this.registerDialogVisible = false
    }
  }
}
</script>

<style scoped>
.login {
  background: url("../resources/background.png");
  background-position: center;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background-size: cover;
  position: fixed;
}

.login-container {
  position: absolute;
  left: 50%;
  top: 25%;
  background-clip: padding-box;
  width: 300px;
  height: 210px;
  padding: 20px 40px 45px 40px;
  opacity:1;
  box-shadow: 0 0 25px #cac6c6;
}

.login_title {
  text-align: center;
  color: white;
  font-size: 20px;
  font-family: "Microsoft YaHei UI Light",serif;
  opacity: 0.8;
}
</style>
